export default {
    model: {
        prop: "message",
        event: "sendMessage",
    },
    props: {
        refName: {
            type: String,
            default: "chatCollection",
        },
        message: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        options: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            _chatEl: null,
            cursorIndex: 0,
            // 弹框状态
            choosePersonVisible: null,
            oldContent: '',
            content: ''
        }
    },
    methods: {
        // 用户输入
        textareaBInput() {
            // 记录当前输入的内容
            this.content = this._chatEl.innerHTML;
            const oldArr = this.oldContent.split('');
            const newArr = this.content.split('');
            let contentStr = this.content;
            // 找出当前输入的内容
            oldArr.forEach(str => {
                contentStr = contentStr.replace(str, '');
            })
            // 输入是@时
            if (contentStr === '@') {
                this.choosePersonVisible = true;
                // 比对算法,找出当前光标的位置,找到当前输入的位置
                newArr.some((now, index) => {
                    if (this.content.substring(0, index) !== this.oldContent.substring(0, index)) {
                        this.cursorIndex = index;
                        return true;
                    }
                    this.cursorIndex = 0;
                })
                setTimeout(() => {
                    this._chatEl.blur();
                })
                setTimeout(() => {
                    this.checkPerson({ personId: '123', name: '张三' });
                }, 1000)
            }
            this.oldContent = this.content
        },
        // 选择@的人
        checkPerson(data) {
            const span = `<span contenteditable="false" data-type="@" data-name="${data.name}" data-personid="${data.personId}"  style="color:#4A90E2;">@${data.name}</span><span>&nbsp;</span>`;
            let span123 = document.createElement('span');
            span123.innerHTML = span
            let html = this._chatEl.innerHTML;
            // 光标位置为0在后面追加,不为0从中间替换
            if (this.cursorIndex) {
                console.log(html);
                html = html.substr(0, this.cursorIndex - 1) + span + html.substr(this.cursorIndex, html.length);
            } else {
                html = html.substr(0, html.length - 1) + span;
            }
            this._chatEl.innerHTML = html;
            this.oldContent = this._chatEl.innerHTML;
            this.choosePersonVisible = false;
            this.keepLastIndex()
        },
        keepLastIndex(obj = this._chatEl) {
            // 在微信小程序等没有window和dom的环境下无法使用
            if (window.getSelection) { //ie11 10 9 ff safari
                obj.focus(); //解决ff不获取焦点无法定位问题
                var range = window.getSelection(); //创建range
                range.selectAllChildren(obj); //range 选择obj下所有子内容
                range.collapseToEnd(); //光标移至最后
            } else if (document.selection) { //ie10 9 8 7 6 5
                var range = document.selection.createRange(); //创建选择对象
                //var range = document.body.createTextRange();
                range.moveToElementText(obj); //range定位到obj
                range.collapse(false); //光标移至最后
                range.select();
            }
        },
        // 获取提交数据
        getModel() {
            return {
                _el: this._chatEl,
                content: this._chatEl.innerHTML,
                text: this._chatEl.innerText,
                needData: this.queryUserList(this._chatEl.children)
            }
        },
        // 获取特殊dom元素上存放的信息
        queryUserList(domList) {
            if (!domList.length) return []
            let needList = [];
            let filterData = (arr) => {
                arr = Array.from(arr);
                arr.forEach((item) => {
                    if (item.dataset.name && item.dataset.personid) {
                        needList.push({
                            name: item.dataset.name,
                            personid: item.dataset.personid,
                        });
                    }
                    if (item.children.length) {
                        filterData(item.children);
                    }
                });
            };
            filterData(domList);
            return needList
        },
    },
    mounted() {
        //   初始化,对可编辑元素记录和赋值
        this._chatEl = this.$refs[this.refName];
        this._chatEl.innerHTML = this.message;
        this.content = this.message
        this.oldContent = this.message;
    },
    beforeDestroy() { },
}